<template>
    <div :class="[selected ? 'leftCome' : 'leftLeave', 'module1']">
        <border-s-1 title="幸福社区高空抛物事件统计" height="20%">
            <div class="module1-item-I">
                <circle-s-2 :monthNum="monthNum" :allNum="allNum"></circle-s-2>
                <div class="info">
                    <p>
                        <span>本月事件</span>
                        <span>6</span>
                    </p>
                    <p>
                        <span>累计事件</span>
                        <span style="color: #2C77E5">30</span>
                    </p>
                </div>
            </div>
        </border-s-1>
        <border-s-1 title="幸福社区年龄统计" height="30%"></border-s-1>
        <border-s-1 title="幸福社区各类人员统计" height="46%"></border-s-1>
    </div>
</template>

<script>
import borderS1 from "./borderS1.vue"
import circleS2 from "./circleS2.vue"
export default {
    name: "module1",
    props: ["selected"],
    components: {
        borderS1,
        circleS2
    },
    data() {
        return {
            monthNum: 0,
            allNum: 30
        }
    },
    mounted() {

    },
    methods: {
        
    }
}
</script>

<style scoped>
.module1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.module1 .module1-item-I {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.module1 .module1-item-I >.info {
    color: #fff;
    font-size: 18px;
    text-align: left;
    position: relative;
}
.module1 .module1-item-I >.info::after {
    content: "";
    display: block;
    width: 1px;
    height: 60%;
    position: absolute;
    left: 0;
    top: 20%;
    background-color: red;
}
.module1 .module1-item-I >.info>p {
    padding: 12px 0;
}
.module1 .module1-item-I >.info>p>span {
    padding-left: 12px;
}
.module1 .module1-item-I >.info>p>span:nth-last-of-type(1) {
    color: #04F8F4;
    font-size: 20px;
    font-family: "ZaoZiGongFangBanHeiChangGuiTiZiTi-1";
}
</style>